<script setup lang="ts">
import { defineProps } from 'vue'
defineProps<{
  page: String
}>()
</script>

<template>
  <view class="m-bottomnav">
    <ul class="menu">
      <li class="item">
        <view class="iconfont gray">&#xe644;</view>
        <p class="gray">实况信息</p>
      </li>
      <li class="item" :class="{ 'active': page === 'home' }">
        <view class="iconfont">&#xe70d;</view>
        <p class="gray">台风</p>
      </li>
      <li class="item">
        <view class="iconfont gray">&#xe663;</view>
        <p class="gray">预警预报</p>
      </li>
    </ul>
  </view>
</template>

<style lang="scss">
@import '@/assets/mixin.scss';

.m-bottomnav {
  @include positionBottomRight(fixed, 0.75rem, 0);
  width: 100%;
  z-index: 500;
  text-align: center;

  .menu {
    position: relative;
    display: inline-block;
    border-radius: 0.8rem;
    box-shadow: 0 0 0.1265rem 0 rgba(0, 0, 0, .3);

    .item {
      float: left;
      padding: 0.36rem 0.7rem 0.36rem;
      height: inherit;
      background: #fff;
      cursor: pointer;

      view.iconfont {
        font-size: 0.52rem;
      }

      p {
        font-size: 0.3rem;
      }

      &:first-child {
        border-radius: 0.8rem 0 0 0.8rem;
        padding-right: 1rem;
        padding-left: 0.35rem;
      }

      &:nth-child(2) {
        @include positionTopLeft(absolute, 50%, 50%);
        border-radius: 50%;
        line-height: 1.3rem;
        background: #fcfeff;
        transform: translate(-50%, -50%);

        view.iconfont {
          position: absolute;
          top: -0.1rem;
        }

        p.gray {
          transform: translateY(0.1rem);
        }
      }

      &:last-child {
        border-radius: 0 0.9rem 0.9rem 0;
        padding-left: 1.1rem;
        padding-right: 0.4rem;
      }
    }

    .active {
      box-shadow: 0 0 .50667rem 0 rgba(0, 105, 255, .47) !important;
      color: #fff !important;
      background: linear-gradient(0deg, #097aff, #00aeff) !important;

      p {
        color: #fff !important;
      }
    }
  }
}
</style>
